import AsyncStorage from '@react-native-async-storage/async-storage';
import React from 'react';
import {
  Text,
  TextInput,
  View,
  Dimensions,
  TouchableWithoutFeedback,
  ToastAndroid,
} from 'react-native';

import Ionicons from 'react-native-vector-icons/Ionicons';
import {post} from '../http/http';
import ModalViewUtil from '../components/ModalViewUtil';
import {TouchableOpacity} from 'react-native-gesture-handler';
import ColorButton from '../components/ColorButton';

const WIN_WIDTH = Dimensions.get('window').width;
export default class ModifyPasswordView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      code: '',
      t: new Date().getTime(),
      secureTextEntry: true,
      secureTextEntry2: true,
      index: props.index,
    };
  }

  async componentDidMount() {
    try {
      const username = await AsyncStorage.getItem('USERNAME');
      this.setState({username: username || ''});
    } catch (e) {}
  }

  modifyPassword = async () => {
    if (this.state.password !== this.state.password2) {
      ToastAndroid.show('请确认两次输入的密码是否一致', ToastAndroid.SHORT);
      return;
    }
    try {
      const {data} = await post(
        '/member/memberSchoolUsers/api/uptMemberUserPwd',
        {
          password: this.state.password,
        },
        true,
      );

      ModalViewUtil.dismissBottomView();
    } catch (e) {
      ToastAndroid.show(e.message, ToastAndroid.SHORT);
      this.setState({t: new Date().getTime()});
    }
  };

  render() {
    let width = (WIN_WIDTH * 4) / 5;
    return (
      <View
        style={{
          width: width,
          backgroundColor: 'white',
          borderRadius: 8,
          padding: 20,
        }}>
        <View
          style={{
            marginHorizontal: 80,
            marginTop: '10%',
            justifyContent: 'center',
          }}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
            }}>
            <Text style={{fontSize: 20}}>输入密码</Text>
            <TextInput
              placeholder={'请输入密码'}
              style={{
                marginHorizontal: 15,
                flex: 1,
                fontSize: 20,
                borderColor: '#999',
                borderRadius: 8,
                borderWidth: 1,
                paddingLeft: 15,
              }}
              value={this.state.password}
              secureTextEntry={this.state.secureTextEntry}
              ref={v => (this.phoneInput = v)}
              autoCorrect={false}
              autoCapitalize={'none'}
              onChangeText={text => this.setState({password: text})}
              onSubmitEditing={() => this.phoneInput && this.phoneInput.blur()}
            />
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  secureTextEntry: !this.state.secureTextEntry,
                })
              }>
              <Ionicons
                name={
                  this.state.secureTextEntry ? 'eye-off-outline' : 'eye-outline'
                }
                size={35}
                color={'#69C2B3'}
              />
            </TouchableOpacity>
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginTop: '15%',
            }}>
            <Text style={{fontSize: 20}}>确认密码</Text>
            <TextInput
              placeholder={'请确认密码'}
              ref={v => (this.passwordInput = v)}
              value={this.state.password2}
              secureTextEntry={this.state.secureTextEntry2}
              style={{
                marginHorizontal: 15,
                flex: 1,
                fontSize: 20,
                borderColor: '#999',
                borderRadius: 8,
                borderWidth: 1,
                paddingLeft: 15,
              }}
              onChangeText={text => this.setState({password2: text})}
              onSubmitEditing={() =>
                this.passwordInput && this.passwordInput.blur()
              }
            />
            <TouchableOpacity
              onPress={() =>
                this.setState({
                  secureTextEntry2: !this.state.secureTextEntry2,
                })
              }>
              <Ionicons
                name={
                  this.state.secureTextEntry2
                    ? 'eye-off-outline'
                    : 'eye-outline'
                }
                size={35}
                color={'#69C2B3'}
              />
            </TouchableOpacity>
          </View>
        </View>
        <ColorButton
          title={'修改密码'}
          containerStyle={{
            marginVertical: 40,
            paddingHorizontal: 30,
            marginHorizontal: 40,
          }}
          disabled={!this.state.password || !this.state.password2}
          backgroundColor={'#30CF9C'}
          disabledContainerStyle={{backgroundColor: '#C5ECDFFF'}}
          fontSize={20}
          onPress={this.modifyPassword}
        />
        <TouchableWithoutFeedback
          onPress={() => {
            ModalViewUtil.dismissView();
          }}>
          <Ionicons
            name={'close-outline'}
            size={50}
            style={{
              position: 'absolute',
              left: '45%',
              bottom: -100,
              backgroundColor: '#ffffff66',
              borderRadius: 25,
            }}
            color={'white'}
          />
        </TouchableWithoutFeedback>
      </View>
    );
  }
}
